<template>
  <div class="code-box">
    <h3 class="code-box-title">5、Teleport的使用，增加一个模态框传送视图</h3>
    <p>Teleport组件可以将组件渲染到任意位置，可以用来实现模态框的传送功能。 to属性可以指定渲染的位置，可以是body、#id、.class、标签名等。</p>
    <div>
      {{ showModal }}
      <button @click="showModal = true">打开模态框</button>
      <Teleport to="body">
        <div v-if="showModal" class="modal">
          <h3>模态框</h3>
          <p>这里是模态框的内容</p>
          <button class="btn" @click="showModal = false">关闭模态框</button>
        </div>
      </Teleport>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';

const showModal = ref(false);
defineOptions({
  name: 'TeleportSelf',
})

</script>

<style scoped lang='scss'>
.code-box {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
  min-height: 50px;

  &-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.modal {
  position: fixed; //如果父组件使用了 filter 属性，position 为 fixed或absolute 冲突
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #6a37e2;
  color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  width: 400px;
  text-align: center;
}
</style>
